<!DOCTYPE html>
<html lang="zh">

<head>
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta charset="utf-8">
    <title>Index</title>
    <meta name="keywords" />
    <meta name="description" />
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="./css/animate.min.css">
    <link rel="stylesheet" href="./css/aos.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="home">

        <div class="header">
            <div class="box">
                <div class="l">
                    <a href="./index.html" class="logo animated fadeInUp">
                        <img src="./images/logo.png" alt="">
                    </a>
                </div>
                <div class="links">
                    <a href="index.html" class="on">
                        Home
                    </a>
                    <!-- 首页使用 -->
                    <a  class="goTech" style="cursor: pointer;">
                        Technology
                    </a>
                    <!-- 内页使用 -->
                    <!-- <a href="index.html?scrollTo=md1">
                        Technology
                    </a> -->
                    <a href="team.html">
                        Our Team
                    </a>
                    <a href="join.html">
                        Join Us
                    </a>
                    <a href="">
                        EN-CN
                    </a>
                </div>
            </div>
        </div>

        <div class="pheader">
            <div class="menu">
                <div class="l">
                    <a href="./index.html" target="_self" class="animated fadeInUpLeft">
                        <img src="./images/logo.png" alt="">
                    </a>
                </div>
                <div class="navbox">
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                </div>
            </div>
        </div>
        <div class="menuList">
            <div class="item">
                <div class="tb">
                   <a href="index.html">Home</a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                   <a href="index.html?scrollTo=md1">Technology</a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                 <a href="team.html">Our Team</a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                    <a href="join.html">Join Us</a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                    <a href=""> EN-CN</a>
                </div>
            </div>
        </div>

        <div class="banner">
            <div class="fix">
                <video src="./images/1.mov" autoplay loop muted playsinline
                webkit-playsinline class="common_bg"></video>
                <div class="wrap">
                    <div class="title animated fadeInUp">
                        <p><span class="y1">Deep</span> <span class="opacity">Learning</span> </p>
                        <p><span class="opacity">+First</span> Principle</p>
                    </div>
                    <div class="p1 animated fadeInUp" style="animation-delay: .2s">
                        Chemistry has changed the world<br>
                        Now, we change chemistry with AI.
                    </div>
                </div>
            </div>
        </div>

        <div class="section1">
            <div class="title wow animated fadeInUp">
                Pain points in the development of <br> traditional chemical materials
            </div>
            <div class="content">
                <div class="item wow animated fadeInUp" style="animation-delay: .1s">
                    <div>
                        <div class="num">01.</div>
                        <div class="p1">Long cycle</div>
                    </div>
                    <div class="hide">
                        <img src="./images/i2.png" class="common_bg" alt="">

                        <div class="text">
                            Only <span>1-2</span> analysis experiments <br>
                            can be conducted <span>per day</span>,<br>
                            and it takes an average of<br>
                            <span>10 years</span> from laboratory <br>
                            synthesis to large-scale production
                        </div>
                    </div>
                </div>
                <div class="item wow animated fadeInUp" style="animation-delay: .2s">
                    <div>
                        <div class="num">02.</div>
                        <div class="p1">High cost</div>
                    </div>
                    <div class="hide">
                        <img src="./images/i3.png" class="common_bg" alt="">

                        <div class="text">
                            The successful laboratory level <br>
                            synthesis of a new material <br>
                            requires a cost ranging from<br>
                            <span>2 to 20 million</span> dollars
                        </div>
                    </div>
                </div>
                <div class="item wow animated fadeInUp" style="animation-delay: .3s">
                    <div>
                        <div class="num">03.</div>
                        <div class="p1">Low success rate</div>
                    </div>
                    <div class="hide">
                        <img src="./images/i4.png" class="common_bg" alt="">

                        <div class="text">
                            <span>55%</span> of experimental data is <br>
                            unstructured and difficult to interpret, <br>
                            <span>50%</span> of researchers find it difficult to <br>
                            replicate their own experimental results, and <br>
                            <span>70%</span> of researchers find it difficult to <br>
                            replicate others' experimental results
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section2" id="md1">
            <div class="fix">
                <div class="cir">
                    <div></div>
                </div>
                <div class="cir2">
                    <div></div>
                </div>
<!--                <img src="./images/ci.rpng" class="cir" alt="">-->
                <div class="position_text">
                    <div class="p1">Reactive Al Platform</div>
                    <div class="p2">
                        Generate new material molecules and new chemical <br>
                        reactions faster, more accurately, and cheaper.
                    </div>
                </div>
                <div class="center">
                    <div class="position position1">
                        <div class="message">
                            <div class="img">
                                <img src="./images/tu1.svg" alt="">
                            </div>
                            <div class="text">
                                <div class="p1">Input:</div>
                                <div class="p2">Application and <br> Performance</div>
                            </div>
                        </div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="33" height="62" viewBox="0 0 33 62" fill="none">
                            <path d="M0 59.1716V58.3394C0 57.8025 0.215877 57.2881 0.599063 56.912L25.5457 32.4274C26.3445 31.6434 26.3445 30.3566 25.5457 29.5726L0.599065 5.08797C0.215878 4.71188 0 4.19752 0 3.6606V2.27755C0 0.50298 2.13933 -0.392599 3.40354 0.852741L32.0644 29.0859C32.8555 29.8651 32.8603 31.1397 32.0751 31.9249L3.41421 60.5858C2.15428 61.8457 0 60.9534 0 59.1716Z" fill="#0080FA"/>
                        </svg>
                    </div>
                    <div class="position position2 right">
                        <div class="message">
                            <div class="img">
                                <img src="./images/share.png" alt="">
                            </div>
                            <div class="text">
                                <div class="p1">output：</div>
                                <div class="p2">Molecular structure that <br> meets the requirements</div>
                            </div>
                        </div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="33" height="62" viewBox="0 0 33 62" fill="none">
                            <path d="M0 59.1716V58.3394C0 57.8025 0.215877 57.2881 0.599063 56.912L25.5457 32.4274C26.3445 31.6434 26.3445 30.3566 25.5457 29.5726L0.599065 5.08797C0.215878 4.71188 0 4.19752 0 3.6606V2.27755C0 0.50298 2.13933 -0.392599 3.40354 0.852741L32.0644 29.0859C32.8555 29.8651 32.8603 31.1397 32.0751 31.9249L3.41421 60.5858C2.15428 61.8457 0 60.9534 0 59.1716Z" fill="#0080FA"/>
                        </svg>
                    </div>


                    <div class="other">
                        <div class="other_list other_list1">
                            <div class="small">
                                <img src="./images/x1.png" alt="">
                            </div>
                            <p>ReactGen</p>
                        </div>
                        <div class="other_list other_list2">
                            <div class="small">
                                <img src="./images/x4.png" alt="">
                            </div>
                            <p>Reactify</p>
                        </div>
                        <div class="other_list other_list3">
                            <div class="small">
                                <img src="./images/x3.png" alt="">
                            </div>
                            <p>ReactBo</p>
                        </div>
                        <div class="other_list other_list4">
                            <div class="small">
                                <img src="./images/x2.png" alt="">
                            </div>
                            <p>ReactControl</p>
                        </div>
                    </div>
                    <div class="move">

                        <div class="joke">
                            <div class="item" data-index="1">
                                <img src="./images/ro1.png" class="bg bg1" alt="">
                                <img src="./images/ro1_1.png" class="bg bg2" alt="">
                                <img src="./images/bor_1.png" class="bg bg3" alt="">
                                <!-- <div class="icon">
                                    <img src="./images/ic1.png" alt="">
                                </div> -->
                            </div>
                            <div class="item on" data-index="0">
                                <img src="./images/ro2.png" class="bg bg1" alt="">
                                <img src="./images/ro2_2.png" class="bg bg2" alt="">
                                <img src="./images/bor_2.png" class="bg bg3" alt="">
                                <!-- <div class="icon">
                                    <img src="./images/ic2.png" alt="">
                                </div> -->

                            </div>
                            <div class="item" data-index="2">
                                <img src="./images/ro3.png" class="bg bg1" alt="">
                                <img src="./images/ro3_3.png" class="bg bg2" alt="">
                                <img src="./images/bor_3.png" class="bg bg3" alt="">
                                <!-- <div class="icon">
                                    <img src="./images/ic3.png" alt="">
                                </div> -->

                            </div>
                            <div class="item" data-index="3">
                                <img src="./images/ro4.png" class="bg bg1" alt="">
                                <img src="./images/ro4_4.png" class="bg bg2" alt="">
                                <img src="./images/bor_4.png" class="bg bg3" alt="">
                                <!-- <div class="icon">
                                    <img src="./images/ic4.png" alt="">
                                </div> -->

                            </div>
                        </div>
                    </div>
                </div>
                <div class="fist">
                    <div class="wrap">
                        <div class="title wow animated fadeInUp">Our Technology</div>
                        <div class="cut wow animated fadeInUp" style="animation-delay: .1s">
                            <div class="list on">ReactGen</div>
                            <div class="list">Reactify</div>
                            <div class="list">ReactBo</div>
                            <div class="list">ReactControl</div>
                        </div>
                        <div class="con_cut wow animated fadeInUp">
                            <div class="con_cut_list animated fadeInUp on">
                                <div class="text">
                                    Real time monitoring of optimization processes and establishment of algorithm prediction test success rate, calculate in advance if there is no effect.
                                </div>
                                <div class="dis">
                                    <span class="count-item" data-to="50">50</span>
                                    <div class="p1">%</div>
                                    <div class="p2">save time</div>
                                </div>
                                <div class="p3">Source: Duan et al. J. Chem. Theory Comput. 2022, 18, 4282−4292</div>
                            </div>
                            <div class="con_cut_list animated fadeInUp ">
                                <div class="text">
                                    Real time monitoring of optimization processes and establishment of algorithm prediction test success rate, calculate in advance if there is no effect.
                                </div>
                                <div class="dis">
                                    <span class="count-item" data-to="50">50</span>
                                    <div class="p1">%</div>
                                    <div class="p2">save time</div>
                                </div>
                                <div class="p3">Source: Duan et al. J. Chem. Theory Comput. 2022, 18, 4282−4292</div>
                            </div>
                            <div class="con_cut_list animated fadeInUp ">
                                <div class="text">
                                    Real time monitoring of optimization processes and establishment of algorithm prediction test success rate, calculate in advance if there is no effect.
                                </div>
                                <div class="dis">
                                    <span class="count-item" data-to="50">50</span>
                                    <div class="p1">%</div>
                                    <div class="p2">save time</div>
                                </div>
                                <div class="p3">Source: Duan et al. J. Chem. Theory Comput. 2022, 18, 4282−4292</div>
                            </div>
                            <div class="con_cut_list animated fadeInUp ">
                                <div class="text">
                                    Real time monitoring of optimization processes and establishment of algorithm prediction test success rate, calculate in advance if there is no effect.
                                </div>
                                <div class="dis">
                                    <span class="count-item" data-to="50">50</span>
                                    <div class="p1">%</div>
                                    <div class="p2">save time</div>
                                </div>
                                <div class="p3">Source: Duan et al. J. Chem. Theory Comput. 2022, 18, 4282−4292</div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="mobile_box">
                    <div class="p1 wow fadeInUp">Reactive Al Platform</div>
                    <div class="p2 wow fadeInUp">
                        Generate new material molecules and new chemical <br>
                        reactions faster, more accurately, and cheaper.
                    </div>
                    <div class="position wow fadeInUp">
                        <div class="message">
                            <div class="img">
                                <img src="./images/tu1.svg" alt="">
                            </div>
                            <div class="text">
                                <div class="p1">Input:</div>
                                <div class="p2">Application and  Performance</div>
                            </div>
                        </div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="33" height="62" viewBox="0 0 33 62" fill="none">
                            <path d="M0 59.1716V58.3394C0 57.8025 0.215877 57.2881 0.599063 56.912L25.5457 32.4274C26.3445 31.6434 26.3445 30.3566 25.5457 29.5726L0.599065 5.08797C0.215878 4.71188 0 4.19752 0 3.6606V2.27755C0 0.50298 2.13933 -0.392599 3.40354 0.852741L32.0644 29.0859C32.8555 29.8651 32.8603 31.1397 32.0751 31.9249L3.41421 60.5858C2.15428 61.8457 0 60.9534 0 59.1716Z" fill="#0080FA"/>
                        </svg>
                    </div>
                    <div class="pic wow fadeInUp">
                        <img src="./images/phone.png" alt="">
                    </div>
                    <div class="position position2 wow fadeInUp">
                        <svg xmlns="http://www.w3.org/2000/svg" width="33" height="62" viewBox="0 0 33 62" fill="none">
                            <path d="M0 59.1716V58.3394C0 57.8025 0.215877 57.2881 0.599063 56.912L25.5457 32.4274C26.3445 31.6434 26.3445 30.3566 25.5457 29.5726L0.599065 5.08797C0.215878 4.71188 0 4.19752 0 3.6606V2.27755C0 0.50298 2.13933 -0.392599 3.40354 0.852741L32.0644 29.0859C32.8555 29.8651 32.8603 31.1397 32.0751 31.9249L3.41421 60.5858C2.15428 61.8457 0 60.9534 0 59.1716Z" fill="#0080FA"/>
                        </svg>
                        <div class="message">
                            <div class="img">
                                <img src="./images/share.png" alt="">
                            </div>
                            <div class="text">
                                <div class="p1">output：</div>
                                <div class="p2">Molecular structure that  meets the requirements</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section3">
            <div class="title">
                <div class="p1 wow animated fadeInUp">Customized solutions</div>
                <div class="p2 wow animated fadeInUp">
                    To cope with fierce market competition, it is necessary to leverage <br>
                    little resource investments to unlock large market opportunities.
                </div>
            </div>
            <div class="content">
                <div class="item wow animated fadeInUp" style="animation-delay: .1s">
                    <div class="y">
                        <div class="headline">What could work？</div>
                        <div class="pick">
                            Screen properties of candidate materials.
                        </div>
                    </div>
                    <div class="position">
                        <img src="./images/g.svg" class="line" alt="">
                        <div class="bor">
                            <div class="img">
                                <img src="./images/hh.png" alt="">
                            </div>
                            <p>Molecular Properties</p>
                        </div>
                    </div>
                </div>
                <div class="item wow animated fadeInUp" style="animation-delay: .2s">
                    <div class="y">
                        <div class="headline">What can be made?</div>
                        <div class="pick">
                            Screen properties of candidate materials.
                        </div>
                    </div>
                    <div class="position">
                        <img src="./images/g.svg" class="line" alt="">
                        <div class="bor">
                            <div class="img">
                                <img src="./images/hh.png" alt="">
                            </div>
                            <p>Molecular Properties</p>
                        </div>
                    </div>
                </div>
                <div class="item wow animated fadeInUp" style="animation-delay: .3s">
                    <div class="y">
                        <div class="headline">Could it be better?</div>
                        <div class="pick">
                            Screen properties of candidate materials.
                        </div>
                    </div>
                    <div class="position">
                        <img src="./images/g.svg" class="line" alt="">
                        <div class="bor">
                            <div class="img">
                                <img src="./images/hh.png" alt="">
                            </div>
                            <p>Molecular Properties</p>
                        </div>
                    </div>
                </div>
                <div class="item wow animated fadeInUp" style="animation-delay: .4s">
                    <div class="y">
                        <div class="headline">How does it perform in <br>production?</div>
                        <div class="pick">
                            Screen properties of candidate materials.
                        </div>
                    </div>
                    <div class="position">
                        <img src="./images/g.svg" class="line" alt="">
                        <div class="bor">
                            <div class="img">
                                <img src="./images/hh.png" alt="">
                            </div>
                            <p>Molecular Properties</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section4">
            <div class="content wow animated fadeInUp">
                <img src="./images/bg2.png" class="common_bg" alt="">
                <div class="text">
                    <!-- <div class="p1">When Experts Meet AI</div> -->
                    <a href="./team.html" class="more">Learn More</a>
                </div>
            </div>
        </div>

        <div class="section5">
            <div class="top wow animated fadeInUp">
                <div class="title">Latest News</div>
                <div class="button">
                    <div class="click">
                        <img src="./images/c1.png" alt="">
                        <img src="./images/c1_1.png" alt="">
                    </div>
                    <div class="click">
                        <img src="./images/c1.png" alt="">
                        <img src="./images/c1_1.png" alt="">
                    </div>
                </div>
            </div>
            <div class="content wow animated fadeInUp" style="animation-delay: .2s">
                <div class="newsSwiper swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href="" class="item">
                                <div class="img">
                                    <img src="./images/news1.png" alt="">
                                </div>
                                <div class="text">
                                    <div class="p1">
                                        Gaoling Seed | Scientific Intelligent <br>
                                        Chemical Materials Enterprise <br>
                                        "Deep Principle Technology" <br>
                                        Completed Seed+Round Financing
                                    </div>
                                    <div class="more">Read More</div>
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="" class="item">
                                <div class="img">
                                    <img src="./images/news2.png" alt="">
                                </div>
                                <div class="text">
                                    <div class="p1">
                                        MIT PhD's Journey in Catalytic<br>
                                        Materials: Building a Chemical<br>
                                        Industry "Chip" with AI4S | Quantum<br>
                                        Lightyear
                                    </div>
                                    <div class="more">Read More</div>
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="" class="item">
                                <div class="img">
                                    <img src="./images/news3.png" alt="">
                                </div>
                                <div class="text">
                                    <div class="p1">
                                        Shenshi Technology's strategic <br>
                                        investment in deep principles, AI for <br>
                                        Science, and the upgrading of the<br>
                                        open ecosystem's "friend circle"
                                    </div>
                                    <div class="more">Read More</div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="foot">
            <div class="dom1">
                <div class="l">
                    <div class="logo">
                        <img src="./images/logo.png" alt="">
                    </div>
                    <div class="follow">
                        <p>Follow Us：</p>
                        <div class="icons">
                            <a href="">
                                 <img src="./images/icon1.svg" alt="">
                                 <div class="code animated fadeIn">
                                    <img src="./images/code.jpg" alt="">
                                 </div>
                            </a>
                            <a href="">
                                <img src="./images/icon2.svg" alt="">
                            </a>
                            <a href="">
                                <img src="./images/icon3.svg" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="email">
                        info@deepprinciple.com
                    </div>
                </div>
                <div class="c">
                     <div class="ci">
                        <a href="./index.html">
                            Home
                        </a>
                             <!-- 首页使用 -->
                             <a  class="goTech" style="cursor: pointer;">
                                Technology
                            </a>
                            <!-- 内页使用 -->
                            <!-- <a href="index.html?scrollTo=md1">
                                Technology
                            </a> -->
                     </div>
                    <div class="ci">
                        <a href="./join.html">
                            Join Us
                        </a>
                        <a href="./team.html">
                            Our Team
                        </a>
                    </div>
                </div>
                <div class="r">
                    <p class="p1">get updates to your inbox</p>
                    <div class="form">
                        <div class="d1">
                            <div class="item">
                                <input type="text" placeholder="Name">
                            </div>
                            <div class="item">
                                <input type="text" placeholder="Email">
                            </div>
                        </div>
                        <div class="d2">
                            <div class="item">
                                <input type="text" placeholder="Message">
                            </div>
                            <div class="submit">
                                submit
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dom2">
                <div class="l">
                    Copyright ©2024 Deep Principle. All Rights Reserved. Supported by <a href="">Pithy Mfweb</a>
                </div>
                <div class="r">
                    <a href="">This is the filing number</a>
                    <a href="">Legal Notice</a>
                    <a href="">Privacy Policy</a>
                </div>
            </div>
        </div>



    </div>
    <script src="./js/jquery-1.11.0.min.js"></script>
    <script src="./js/wow.min.js"></script>
    <script src="./js/swiper.js"></script>
    <script src="./js/gsap.min.js"></script>
    <script src="./js/ScrollTrigger.min.js"></script>
    <script src="./js/SplitText.min.js"></script>
    <script src="./js/lenis.min.js"></script>
    <script src="./js/aos.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/countUp.js"></script>
    <script>
        new WOW().init();

        new Swiper('.newsSwiper', {
            speed: 1000,
            spaceBetween: 40,
            slidesPerView: 3,
            loop: true,
            navigation: {
                nextEl: '.home .section5 .top .button .click:last-child',
                prevEl: '.home .section5 .top .button .click:first-child',
            },
            breakpoints: {
                100: {
                    spaceBetween: 20,
                    slidesPerView: 1,
                },
                1024: {
                    spaceBetween: 40,
                    slidesPerView: 3,
                },
            },
            autoplay: {
                delay: 4000,
                disableOnInteraction: false,
            },
        })
        ScrollTrigger.create({
            trigger: '.banner',
            start: 'top top',
            end: '+=200',
            onUpdate: (self) => {
                var progress = self.progress
                var opacity = 1 + (progress) *- (1-0.3)
                gsap.to('.home .banner .fix .wrap .title p .opacity', {
                    opacity: 1-progress,
                    ease: 'power2.out',
                    duration: 0.5,
                });
            },
        });
        ScrollTrigger.create({
            trigger: '.banner',
            start: '+=200',
            end: '+=300',
            onUpdate: (self) => {
                var progress = self.progress
                var y =  progress *100
                gsap.to('.home .banner .fix .wrap .title .y1', {
                    y: y+'%',
                    ease: 'power2.out',
                    duration: 0.5,
                });
            },
        });

        var clientHeight = document.documentElement.clientHeight

        var fistNum = 3000
        var section2 = $('.section2')
        var section2Top = section2.position().top
        lenis.on('scroll', (e) => {
            // var l = 4
            // var index = Math.floor((scrollTop - section2Top) / ((fistNum - clientHeight) / l))
            // index <= 0 ? index = 0 : index
            // index >= (l-1) ? index = (l-1) : index
            // $('.home .section2 .fix .fist .wrap .cut .list').removeClass('on').eq(index).addClass('on')
            // $('.home .section2 .fix .center .item').removeClass('on')
            // $('.home .section2 .fix .center .item[data-index="'+ index +'"]').addClass('on')
            // $('.home .section2 .fix .center .joke').css({
            //     'transform': 'rotate('+ index*90 +'deg)'
            // })
        })

        $('.home .section2 .fix .fist .wrap .cut .list').click(function () {
            var index = $(this).index()
            $(this).addClass('on').siblings().removeClass('on')
            $('.home .section2 .fix .center .item').removeClass('on')
            $('.home .section2 .fix .fist .wrap .con_cut .con_cut_list').removeClass('on').eq(index).addClass('on')
            $('.home .section2 .fix .center .item[data-index="'+ index +'"]').addClass('on')
            $('.home .section2 .fix .center .joke').css({
                'transform': 'rotate('+ index*90 +'deg)'
            })
            // var index = $(this).index()
            // var top = section2Top + (index * (fistNum / 4))
            // if (index === 0) {
            //     lenis.scrollTo(top)
            // }else if (index===3){
            //     lenis.scrollTo(top)
            // }else {
            //     lenis.scrollTo(top-300)
            // }
        })

        $('.home .section2 .fix .center .item').click(function () {
            var index = $(this).data('index')
            $('.home .section2 .fix .fist .wrap .cut .list').eq(index).click()
        })

        var left = parseInt($('.home .section2 .fix .center .move').css('left'))
        ScrollTrigger.create({
            trigger: '.section2',
            start: '+=200',
            end: '+=500',
            onUpdate: (self) => {
                var progress = self.progress
                if (progress >=0.1) {
                    $('.home .section2 .fix .center .joke').addClass('on')
                    $('.home .section2 .fix .fist').addClass('hide')
                }else {
                    $('.home .section2 .fix .center .joke').removeClass('on')
                    $('.home .section2 .fix .fist').removeClass('hide')
                }
                // var y =  progress *100
                var left_ = left + progress * -left
                var rote = progress * 45
                var y = progress * -200
                gsap.to('.home .section2 .fix .fist .wrap', {
                    y: y+'px',
                    opacity: 1-progress,
                    ease: 'power2.out',
                    duration: 0.5,
                });
                gsap.to('.home .section2 .fix .center .move', {
                    left: left_+'px',
                    rotate: rote +'deg',
                    ease: 'power2.out',
                    duration: 0.5,
                });
                if (progress >= 1) {
                    $('.home .section2 .fix .center').addClass('an1')
                    $('.home .section2 .fix .position_text').addClass('on')
                    $('.home .section2 .fix .center .item .bg1').css({'opacity':'0'})
                    $('.home .section2 .fix .center .item .bg3').addClass('on')
                }else {
                    $('.home .section2 .fix .center').removeClass('an1')
                    $('.home .section2 .fix .position_text').removeClass('on')
                    $('.home .section2 .fix .center .item .bg1').css({'opacity':'1'})
                    $('.home .section2 .fix .center .item .bg3').removeClass('on')
                }
                // gsap.to('.home .banner .fix .wrap .title .y1', {
                //     y: y+'%',
                //     ease: 'power2.out',
                //     duration: 0.5,
                // });
            },
        });

        $('.goTech').click(function(){
            var offsetTop = document.getElementById('md1').offsetTop - 60
            $(this).addClass('on').siblings('a').removeClass('on')
			$('html').animate({
					scrollTop: offsetTop
				},500)
        })
    </script>
</body>

</html>